import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { ListItem } from '../home'
import axios from 'axios'

const Index: React.FC = () => {
  const { id } = useParams()
  const [v, setV] = useState<ListItem>({} as ListItem)
  const getV = async () => {
    const resp = await axios.get('/api/list/' + id)
    console.log(resp.data)
    setV(resp.data.data)
  }
  useEffect(() => {
    getV()
  }, [])
  const pay = async () => {
    const resp = await axios.get('/api/pay/wap', { params: { title: v.title, price: v.price, id: new Date().getTime() } });
    window.location.href = resp.data.data
  }
   const pay1 = async () => {
    const resp = await axios.get('/api/pay/pc', { params: { title: v.title, price: v.price, id: new Date().getTime() } });
    window.location.href = resp.data.data
  }
  return (
    <div>
      <dl style={{ display: 'flex' }} key={v.id}>
        <dt>
          <img src={v.image} alt="" />
        </dt>
        <dd>
          <h3>{v.title}</h3>
          <p>{v.word}</p>
          <span>{v.price}</span>
        </dd>
      </dl>
      <button onClick={() => pay()}>立即付款</button>
    </div>
  )
}

export default Index
